<!DOCTYPE html>
<html class="x-admin-sm">

	<head>
		<meta charset="UTF-8">
		<title>课程显示页面</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<link rel="stylesheet" href="css/global.css" /> 
		<script src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>
	    <script type="text/javascript" src="js/jquery.min.js" ></script>
        <script type="text/javascript" src="js/jquery.cookie.js"></script>
  
	</head>

	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
				<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
			</a>
		</div>
		
		
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div id="saveTr">
 
					<div class="layui-card"  >
						
						
						<div class="layui-card-body ">
							<form class="layui-form layui-col-space5">

								<div class="layui-input-inline layui-show-xs-block">
									<input type="text" name="title" id="title" placeholder="标题" autocomplete="off" class="layui-input" >
								</div>
								<div class="layui-input-inline layui-show-xs-block">
									<input class="layui-input" placeholder="创建时间"   id="start"></div>
								<div class="layui-input-inline layui-show-xs-block">
									<input class="layui-input" placeholder="结束时间"   id="end"></div>
								
								类型:
								<div class="layui-input-inline layui-show-xs-block">
									<select name="type" id="type" clearable>
										<option value="-1">类型</option> 
										<option value="1 ">课程问答</option>
										<option value="2 ">学习分享</option>
									</select>
								</div>
								 
								问答标签: 
								<div class="layui-input-inline layui-show-xs-block">
									<select name="cid"  id="cid">
										<option value="-1">请选择 </option>	
										<option  v-for="ed in edutag" :value="ed.questionsTagId ">{{ed.questionsTagName}}
									 </option>
									</select>
								</div> 
								

								<div class="layui-input-inline layui-show-xs-block">
                                    <button class="layui-btn" type="button"  lay-filter="sreach" @click="btn">
                                        <i class="layui-icon">&#xe615;搜索</i></button>
                                </div>

  								<div class="layui-inline layui-show-xs-block">
									<button class="layui-btn" id="empty" type="button" lay-filter="sreach">
										<i class="layui-icon">清空</i>
									</button>
								</div>
							</form>
						</div>
					 
							<table class="layui-table layui-form"  id="tb">
								<thead>
									<tr>
										<th>ID</th>
										<th>发表人</th>
										<th>问答标题</th>
										<th>类型	</th>
										<th>是否采纳</th>
										<th>回复数</th>
										<th>浏览数</th>
										<th>点赞数</th>
										<th>添加时间	</th>
										<th>操作</th> 
									</tr>
								</thead>
								<tbody>
									<tr v-for="(e,index) in eaac">
										<td >{{ e.id }}</td>
										<td >{{ e.email }}</td>
										<td >{{ e.title }}</td>
									 	<td>  
										<p v-if="e.type=='1'">课程问答</p>
                    					<p v-if="e.type=='2'">学习分享</p>
									 	</td> 
									 	<td>  
										<p v-if="e.status=='1'">是</p>
                    					<p v-if="e.status=='0'">否</p>
									 	</td> 
									 	 
										<td>{{ e.replyCount }}</td>
										<td>{{ e.browseCount }}</td>
										<td>{{ e.praiseCount }}</td>
										<td>{{ e.addTime }}</td>
										 
										 
										<td class="td-manage">                                     
										 <button title='删除' @click="member_del(e.id)">
												<i class="layui-icon">&#xe642;删除</i>
											</button>
												<button title='修改'  @click="edit(e.id)">
												<i class="layui-icon">&#xe642;修改</i>
											</button>
												<button title='查看'  @click="edit1(e.id)">
												<i class="layui-icon">&#xe642;查看内容</i>
											</button>
										</td>
									</tr>

								</tbody>
							</table>
						     <div class="paging" id="pageHelper">
							<a href="#" @click="first" title="">首</a>
							<a id="backpage" @click="last" href="#" title="">&lt;</a>
							<a id="nextpage" href="#" @click="next" title="">&gt;</a>
							<a href="#" @click="end" title="">末</a>
								<div class="layui-inline layui-show-xs-block">
									<input type="text" id="num" size="1" style="height: 25px;"  class="layui-input">
								</div> 
								<a href="#" @click="tz" title="">跳转</a>
							 共：<span id="sp">{{this.totalPage}}</span>页
							<div class="clear"></div>
						</div>
                            
						 
								
					 
							
							</div>
						</div>
					</div>
				</div>
			</div>
		 

		<!--引入Vue的js 开发环境版本., 包含了有帮助的命令行警告-->
		<script src="js/vue.min.js"></script>
	
		<script src="js/axios.min.js"></script>
		<script src="js/pageHelp.js"></script>
		 <script type="text/javascript" src="js/jquery.cookie.js"></script>

		<script>
			 
			const saveTr = new Vue({
				el: "#saveTr",
				data: {					 
					eduQuestions: [],
					edutag:[],
					eaac: [],
					page: 1, //当前页
				    totalPage: 0 //总页数
				},
				methods: {
					
					//首页
					first: function() {
						this.page = 1;
						this.eaac = pageHelp(this.eduQuestions, 5, 1);
					},
					//上一页
					last: function() {
						this.page = this.page - 1;
						if(this.page <= 1) {
							layer.msg("已经第一页了")
							this.page=1;
						}
						this.eaac = pageHelp(this.eduQuestions, 5, this.page);
					},
					//下一页
					next: function() {
						this.page = this.page + 1;
						console.log(this.page)
						if(this.page >= this.totalPage) {
						layer.msg("已经最后一页了")
							this.page=this.totalPage;
						}
						this.eaac = pageHelp(this.eduQuestions, 5, this.page);
					},
					//末页
					end: function() {
						this.page = this.totalPage;
						this.eaac = pageHelp(this.eduQuestions, 5, this.totalPage)
					},
					
					//跳转页面
					tz: function() {
						var num=$("#num").val();
						if(num>this.totalPage||num<1){
						layer.msg("请输入正确的页数")	
						$("#num").val("");
						
						}
						this.eaac = pageHelp(this.eduQuestions, 5, num)
						$("#num").val("");
					},
					
					 
					//点击事件，（模糊查询）
					btn() {
						axios.defaults.headers.common["token2"] = $.cookie("token2");
						let _this = this;
						var postData = new URLSearchParams();
						postData.append("title", $("#title").val());
					 
						if ($("#start").val()!=null){
							postData.append("startDate", $("#start").val());
						}
						if ($("#end").val()!=null){
							postData.append("endDate", $("#end").val());
						}
						postData.append("cid", $("#cid option:checked").val());
						postData.append("type", $("#type option:checked").val());
						axios({
							method: "post",
							url: "http://localhost:9095/admin/eduq/listAll",
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							params: postData
						}).then(function(response) {
							console.log(response.data.data);
							_this.eduQuestions=response.data.data;
							_this.eaac=_this.eduQuestions;
							_this.totalPage = Math.ceil(_this.eduQuestions.length / 5) //总页数							
						   _this.first();
						});
					},
				edit:function(id){			 			 
			 		$.cookie("id",id);  
			 	 	 
                     xadmin.open('编辑','eduQuestions2.html');				
					},
			 	edit1:function(id){			 			 
			 		$.cookie("id",id);  
			 	 	 
                     xadmin.open('编辑','eduQuestions1.html');				
					},
				member_del:function(id){
				if(confirm("确定要删除吗？")){
         			$.ajax({
						type: 'get',
						dataType: "json",
						url: "http://localhost:9095/admin/eduq/delete", //请求的action路径
						data:  
							{"id": id},
						headers: {
							"token2": $.cookie("token2")
						},
						
						error: function() { //请求失败处理函数
							confirm('请求失败');
						},
						success: function(msg) { //请求成功后处理函数。
						 location.reload();
						
						}
					});  
	    }
				},
				},
				created:function() {
					axios.defaults.headers.common["token2"] = $.cookie("token2");
					let _this = this;
					axios.post("http://localhost:9095/admin/eduq/listAll").then(function(response) {
						console.log(response.data.data);
						_this.eduQuestions = response.data.data;	
						_this.eaac=_this.eduQuestions;
						
						_this.totalPage = Math.ceil(_this.eduQuestions.length / 5) //总页数
					  _this.first();
						
						
						
					});
				 axios.get("http://localhost:9095/edutag/listAll").then(function(response) {
						_this.edutag = response.data.data;			 
						console.log(response.data.data);
					}); 
					 
				},				
			})
		</script>
	</body>
	<script>
		layui.use(['laydate', 'form'],
			function() {
				var laydate = layui.laydate,
					form = layui.form;

 				$(document).on('click','#empty',function(){
					$("#title").val("");
					$("#start").val("");
					$("#end").val("");
					$("#type").val("-1");
					$("#cid").val("-1");
					layui.form.render();
				});
 				
				//执行一个laydate实例
				laydate.render({
					elem: '#start' //指定元素
				});

				//执行一个laydate实例
				laydate.render({
					elem: '#end' //指定元素
				});
			});
 
	    
 
         
	</script>

</html>